<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>非遗百科 - 首页</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            overflow-y: scroll;
            scroll-behavior: smooth;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background-color: #f5f5f5;
            padding: 0;
            margin: 0;
            min-height: 100vh;
            overflow-x: hidden;
            overflow-y: auto;
        }
        
        /* 头部导航栏样式 */
        .header {
            background-color: rgb(135, 73, 73);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            padding: 20px 25px;
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            width: 100%;
            z-index: 1001;
        }
        
        /* 左侧导航组 */
        .nav-left {
            display: flex;
            align-items: center;
            gap: 20px;
        }
        
        /* 中间主题切换 */
        .nav-center {
            display: flex;
            align-items: center;
            flex: 1;
            justify-content: center;
        }
        
        /* 右侧用户设置 */
        .nav-right {
            display: flex;
            align-items: center;
        }
        
        /* 模式切换按钮样式 */
        .theme-toggle {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            margin-right: 15px;
        }
        
        .theme-toggle:hover {
            background-color: #e0e0e0;
            transform: rotate(15deg);
        }
        
        .theme-toggle svg {
            width: 20px;
            height: 20px;
            fill: #666;
        }
        
        /* 暗色模式样式 */
        body.dark-mode {
            background-color: #1a1a1a;
            color: #e0e0e0;
        }
        
        body.dark-mode .header {
            background-color: #2a2a2a;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        /* 确保导航栏背景不透明 */
        .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: inherit;
            z-index: -1;
        }
        
        body.dark-mode .category-title {
            background-color: #3a3a3a;
            color: #e0e0e0;
        }
        
        body.dark-mode .category-title:hover {
            background-color: #4a4a4a;
        }
        
        body.dark-mode .category-dropdown {
            background-color: #2a2a2a;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }
        
        body.dark-mode .category-item {
            color: #e0e0e0;
        }
        
        body.dark-mode .category-item:hover {
            background-color: #3a3a3a;
        }
        
        /* 类别目录样式 */
        .category-nav {
            position: relative;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .category-title {
            background-color: #f0f0f0;
            padding: 8px 15px;
            border-radius: 20px;
            cursor: pointer;
            font-weight: bold;
            color: #666;
            transition: all 0.3s ease;
            user-select: none;
        }
        
        .category-title:hover {
            background-color: #e0e0e0;
        }
        
        /* 分类展示区域 */
        .categories-section {
            margin: 40px 0;
        }
        
        .section-title {
            font-size: 32px;
            font-weight: bold;
            text-align: center;
            margin-bottom: 40px;
            color: #333;
        }
        
        body.dark-mode .section-title {
            color: #e0e0e0;
        }
        
        .categories-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin-bottom: 40px;
        }
        
        .category-card {
            background: white;
            border-radius: 15px;
            padding: 30px 20px;
            text-align: center;
            cursor: pointer;
            transition: all 0.3s ease;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
        }
        
        .category-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 5px;
            background: linear-gradient(135deg, var(--card-color-1), var(--card-color-2));
            transition: height 0.3s ease;
        }
        
        .category-card:hover::before {
            height: 100%;
            opacity: 0.1;
        }
        
        .category-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
        }
        
        body.dark-mode .category-card {
            background-color: #2a2a2a;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        }
        
        body.dark-mode .category-card:hover {
            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.5);
        }
        
        .category-icon {
            font-size: 48px;
            margin-bottom: 15px;
            filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
        }
        
        .category-name {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        body.dark-mode .category-name {
            color: #e0e0e0;
        }
        
        .category-desc {
            font-size: 14px;
            color: #666;
            line-height: 1.6;
        }
        
        body.dark-mode .category-desc {
            color: #999;
        }
        
        .category-count {
            margin-top: 15px;
            font-size: 12px;
            color: #999;
            font-weight: 500;
        }
        
        body.dark-mode .category-count {
            color: #666;
        }
        
         
        
        /* 内容容器样式 */
        .content-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 20px;
            padding-top: 80px;
        }
        
        /* 英雄区域样式 */
        .hero-section {
            background: linear-gradient(135deg, rgb(135, 73, 73) 0%, rgb(180, 96, 96) 100%);
            color: white;
            padding: 60px 20px;
            text-align: center;
            border-radius: 0 0 20px 20px;
            margin-bottom: 40px;
        }
        
        body.dark-mode .hero-section {
            background: linear-gradient(135deg, #3a3a3a 0%, #4a4a4a 100%);
        }
        
        .hero-title {
            font-size: 48px;
            font-weight: bold;
            margin-bottom: 20px;
        }
        
        .hero-subtitle {
            font-size: 20px;
            margin-bottom: 30px;
            max-width: 800px;
            margin-left: auto;
            margin-right: auto;
        }
        
        .hero-cta {
            background-color: white;
            color: rgb(135, 73, 73);
            padding: 15px 30px;
            border-radius: 30px;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
        }
        
        body.dark-mode .hero-cta {
            background-color: #2a2a2a;
            color: #e0e0e0;
        }
        
        .hero-cta:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 搜索区域样式 */
        .search-section {
            max-width: 800px;
            margin: 0 auto 40px;
            text-align: center;
        }
        
        .search-container {
            position: relative;
            display: flex;
            justify-content: center;
        }
        
        .search-input {
            width: 100%;
            max-width: 600px;
            padding: 15px 20px;
            padding-right: 70px;
            border: 2px solid #ddd;
            border-radius: 40px;
            font-size: 16px;
            transition: all 0.3s ease;
        }
        
        body.dark-mode .search-input {
            background-color: #3a3a3a;
            border-color: #555;
            color: #e0e0e0;
        }
        
        .search-input:focus {
            outline: none;
            border-color: rgb(135, 73, 73);
            box-shadow: 0 0 0 3px rgba(135, 73, 73, 0.1);
        }
        
        .search-button {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
            background-color: rgb(135, 73, 73);
            color: white;
            padding: 10px 20px;
            border: none;
            border-radius: 30px;
            cursor: pointer;
            font-weight: bold;
            transition: all 0.3s ease;
        }
        
        body.dark-mode .search-button {
            background-color: #4a4a4a;
        }
        
        .search-button:hover {
            background-color: rgb(115, 60, 60);
        }
        
        body.dark-mode .search-button:hover {
            background-color: #5a5a5a;
        }
        
        /* 功能区块样式 */
        .features-section {
            margin-bottom: 40px;
        }
        
        .section-title {
            text-align: center;
            font-size: 32px;
            margin-bottom: 30px;
            color: #333;
        }
        
        body.dark-mode .section-title {
            color: #e0e0e0;
        }
        
        .features-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
            gap: 30px;
        }
        
        .feature-card {
            background-color: white;
            border-radius: 15px;
            padding: 30px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
            transition: all 0.3s ease;
            text-align: center;
        }
        
        body.dark-mode .feature-card {
            background-color: #2a2a2a;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
        }
        
        .feature-icon {
            width: 80px;
            height: 80px;
            margin: 0 auto 20px;
            border-radius: 50%;
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        body.dark-mode .feature-icon {
            background-color: #3a3a3a;
        }
        
        .feature-icon svg {
            width: 40px;
            height: 40px;
            fill: rgb(135, 73, 73);
        }
        
        body.dark-mode .feature-icon svg {
            fill: #e0e0e0;
        }
        
        .feature-title {
            font-size: 24px;
            margin-bottom: 15px;
            color: #333;
        }
        
        body.dark-mode .feature-title {
            color: #e0e0e0;
        }
        
        .feature-description {
            font-size: 16px;
            color: #666;
            line-height: 1.6;
        }
        
        body.dark-mode .feature-description {
            color: #999;
        }

        .login-button {
            color: white;
            text-decoration: none;
            font-weight: bold;
            padding: 8px 18px;
            border-radius: 20px;
            background-color: rgba(255, 255, 255, 0.2);
            transition: all 0.3s ease;
        }

        .login-button:hover {
            background-color: rgba(255, 255, 255, 0.3);
        }

        /* 精选内容样式 */
        .featured-section {
            margin-bottom: 40px;
        }
        
        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 20px;
        }
        
        .slider-controls {
            display: flex;
            gap: 10px;
        }
        
        .slider-btn {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: white;
            border: 2px solid #ddd;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
        }
        
        body.dark-mode .slider-btn {
            background-color: #2a2a2a;
            border-color: #555;
        }
        
        .slider-btn:hover {
            background-color: #f0f0f0;
            transform: scale(1.1);
        }
        
        body.dark-mode .slider-btn:hover {
            background-color: #3a3a3a;
        }
        
        .slider-btn svg {
            width: 20px;
            height: 20px;
            fill: rgb(135, 73, 73);
        }
        
        body.dark-mode .slider-btn svg {
            fill: #e0e0e0;
        }
        
        .featured-slider-container {
            position: relative;
            overflow: hidden;
            border-radius: 15px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        body.dark-mode .featured-slider-container {
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }
        
        .featured-slider {
            display: flex;
            transition: transform 0.5s ease;
        }
        
        .featured-slide {
            min-width: 100%;
        }
        
        .featured-content {
            background-color: white;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;
            min-height: 400px;
        }
        
        body.dark-mode .featured-content {
            background-color: #2a2a2a;
        }
        
        .featured-image {
            background-color: #f0f0f0;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }
        
        body.dark-mode .featured-image {
            background-color: #3a3a3a;
        }
        
        .featured-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.5s ease;
        }
        
        .featured-content:hover .featured-image img {
            transform: scale(1.05);
        }
        
        .featured-text {
            padding: 40px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        
        .featured-subtitle {
            font-size: 18px;
            color: rgb(135, 73, 73);
            margin-bottom: 10px;
        }
        
        body.dark-mode .featured-subtitle {
            color: #e0e0e0;
        }
        
        .featured-text h3 {
            font-size: 32px;
            margin-bottom: 20px;
            color: #333;
        }
        
        body.dark-mode .featured-text h3 {
            color: #e0e0e0;
        }
        
        .featured-description {
            font-size: 16px;
            color: #666;
            margin-bottom: 30px;
            line-height: 1.6;
        }
        
        body.dark-mode .featured-description {
            color: #999;
        }
        
        .featured-button {
            background-color: rgb(135, 73, 73);
            color: white;
            padding: 12px 25px;
            border-radius: 30px;
            font-size: 16px;
            font-weight: bold;
            cursor: pointer;
            border: none;
            transition: all 0.3s ease;
            align-self: flex-start;
        }
        
        body.dark-mode .featured-button {
            background-color: #4a4a4a;
        }
        
        .featured-button:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.2);
        }
        
        /* 滑动指示器样式 */
        .slider-indicators {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-top: 20px;
        }
        
        .indicator {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            background-color: #ddd;
            border: none;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        body.dark-mode .indicator {
            background-color: #555;
        }
        
        .indicator.active {
            background-color: rgb(135, 73, 73);
            width: 30px;
            border-radius: 6px;
        }
        
        body.dark-mode .indicator.active {
            background-color: #666;
        }
        
        .indicator:hover {
            background-color: #bbb;
        }
        
        body.dark-mode .indicator:hover {
            background-color: #777;
        }
        

        
        /* 页脚样式 */
        .footer {
            background-color: #333;
            color: white;
            padding: 40px 20px;
            text-align: center;
        }
        
        body.dark-mode .footer {
            background-color: #1a1a1a;
        }
        
        .footer-content {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .footer-links {
            margin-top: 20px;
            display: flex;
            justify-content: center;
            gap: 20px;
            flex-wrap: wrap;
        }
        
        .footer-link {
            color: white;
            text-decoration: none;
            transition: color 0.3s ease;
        }
        
        .footer-link:hover {
            color: rgb(180, 96, 96);
        }
        
        .footer-copyright {
            margin-top: 30px;
            font-size: 14px;
            color: #999;
        }
        
        /* 响应式设计 */
        @media (max-width: 1024px) {
            .hero-title {
                font-size: 40px;
            }
            
            .featured-content {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .header {
                padding: 10px 15px;
            }
            
            .hero-section {
                padding: 40px 20px;
            }
            
            .hero-title {
                font-size: 32px;
            }
            
            .hero-subtitle {
                font-size: 18px;
            }
            
            .section-title {
                font-size: 28px;
            }
            
            .featured-text {
                padding: 30px;
            }
            
            .featured-text h3 {
                font-size: 28px;
            }
        }
        
        @media (max-width: 480px) {
            .header {
                flex-direction: column;
                align-items: stretch;
                gap: 10px;
            }
            
            .category-nav,
            .user-avatar {
                align-self: center;
            }
            
            .hero-title {
                font-size: 28px;
            }
            
            .hero-cta {
                padding: 12px 25px;
                font-size: 16px;
            }
            
            .features-grid,
            .categories-grid {
                gap: 20px;
            }
            
            .feature-card {
                padding: 25px;
            }
            
            .featured-text {
                padding: 25px;
            }
            
            .featured-text h3 {
                font-size: 24px;
            }
        }
        
        /* 用户头像样式 */
        .avatar-container {
            position: relative;
            margin-right: 15px;
        }
        
        .user-avatar {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f0f0f0;
            border: none;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            overflow: hidden;
        }
        
        .user-avatar:hover {
            transform: scale(1.1);
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        }
        
        .avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        .avatar-menu {
            position: absolute;
            top: 100%;
            right: 0;
            margin-top: 10px;
            background-color: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
            overflow: hidden;
            z-index: 1002;
            display: none;
            min-width: 120px;
        }
        
        .avatar-container:hover .avatar-menu {
            display: block;
        }
        
        .avatar-menu-item {
            display: flex;
            align-items: center;
            padding: 12px 15px;
            color: #333;
            text-decoration: none;
            transition: background-color 0.3s ease;
        }
        
        .avatar-menu-item:hover {
            background-color: #f5f5f5;
        }
        
        .menu-icon {
            margin-right: 10px;
            font-size: 16px;
        }
        
        .menu-text {
            font-size: 14px;
        }
        
        /* 暗色模式适配 */
        body.dark-mode .user-avatar {
            background-color: #3a3a3a;
        }
        
        body.dark-mode .avatar-menu {
            background-color: #2a2a2a;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
        }
        
        body.dark-mode .avatar-menu-item {
            color: #e0e0e0;
        }
        
        body.dark-mode .avatar-menu-item:hover {
            background-color: #3a3a3a;
        }
    </style>
    <script src="assets/js/avatarMenu.js"></script>
</head>
<body>
    <!-- 头部导航栏 -->
    <div class="header">
        <!-- 左侧导航组 -->
        <div class="nav-left">
            <!-- 首页按钮 -->
            <div class="home-button">
                <a href="index.html" style="display: flex; align-items: center; text-decoration: none; color: white;">
                    <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor" style="margin-right: 5px;">
                        <path d="M12 3L2 12h3v8h6v-6h4v6h6v-8h3L12 3z"/>
                    </svg>
                    <span>首页</span>
                </a>
            </div>
            
            <!-- 类别目录栏 -->
            <div class="category-nav">
                <div class="category-title" id="scroll-to-categories">非遗类别</div>
            </div>
        </div>
        
        <!-- 中间主题切换 -->
        <div class="nav-center">
            <button class="theme-toggle">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                    <path d="M12 7c-2.76 0-5 2.24-5 5s2.24 5 5 5 5-2.24 5-5-2.24-5-5-5zm0-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                </svg>
            </button>
        </div>
        
        <!-- 右侧用户设置 -->
        <div class="nav-right">
            <a href="login.html" class="login-button">登录</a>
        </div>
    </div>

    <!-- 主内容区域 -->
    <div class="content-container">
        <!-- 主题区域 -->
        <div class="hero-section">
            <h1 class="hero-title">探索中华非物质文化遗产</h1>
            <p class="hero-subtitle">发现、了解并传承中华民族珍贵的非物质文化遗产，感受传统与现代的交融之美</p>
            <button class="hero-cta" id="explore-button">开始探索</button>
        </div>
        
        <!-- 搜索区域 -->
        <div class="search-section">
            <div class="search-container">
                <input type="text" class="search-input" placeholder="搜索非遗项目、传承人、类别..." id="search-input">
                <button class="search-button" id="search-button">搜索</button>
            </div>
        </div>
        
        <!-- 分类展示区域 -->
        <div class="categories-section" id="categories-section">
            <h2 class="section-title">非遗分类</h2>
            <div class="categories-grid">
                <!-- 传统技艺 -->
                <div class="category-card" data-category="传统技艺" style="--card-color-1: #FF6B6B; --card-color-2: #FF8E8E;">
                    <div class="category-icon">🎨</div>
                    <div class="category-name">传统技艺</div>
                    <div class="category-desc">传承千年的手工艺术，凝聚匠人智慧结晶</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 传统音乐 -->
                <div class="category-card" data-category="传统音乐" style="--card-color-1: #4ECDC4; --card-color-2: #44A08D;">
                    <div class="category-icon">🎵</div>
                    <div class="category-name">传统音乐</div>
                    <div class="category-desc">悠扬的旋律，诉说着古老的故事</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 传统舞蹈 -->
                <div class="category-card" data-category="传统舞蹈" style="--card-color-1: #A8E6CF; --card-color-2: #7FD7B8;">
                    <div class="category-icon">💃</div>
                    <div class="category-name">传统舞蹈</div>
                    <div class="category-desc">舞动的身姿，展现民族的风采</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 传统戏剧 -->
                <div class="category-card" data-category="传统戏剧" style="--card-color-1: #FFD93D; --card-color-2: #FFC93D;">
                    <div class="category-icon">🎭</div>
                    <div class="category-name">传统戏剧</div>
                    <div class="category-desc">唱念做打，演绎千年文化精髓</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 传统美术 -->
                <div class="category-card" data-category="传统美术" style="--card-color-1: #C7CEEA; --card-color-2: #A0A8D4;">
                    <div class="category-icon">🖼️</div>
                    <div class="category-name">传统美术</div>
                    <div class="category-desc">笔墨丹青，描绘中华艺术之美</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 曲艺 -->
                <div class="category-card" data-category="曲艺" style="--card-color-1: #FFB6B9; --card-color-2: #FFA5A9;">
                    <div class="category-icon">🎤</div>
                    <div class="category-name">曲艺</div>
                    <div class="category-desc">说唱艺术，传递民间的智慧</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 民间文学 -->
                <div class="category-card" data-category="民间文学" style="--card-color-1: #FFEAA7; --card-color-2: #FDCB6E;">
                    <div class="category-icon">📚</div>
                    <div class="category-name">民间文学</div>
                    <div class="category-desc">口口相传的故事，记录民族记忆</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 传统医药 -->
                <div class="category-card" data-category="传统医药" style="--card-color-1: #81C784; --card-color-2: #66BB6A;">
                    <div class="category-icon">💊</div>
                    <div class="category-name">传统医药</div>
                    <div class="category-desc">中医瑰宝，守护健康千年</div>
                    <div class="category-count">查看更多 →</div>
                </div>
                
                <!-- 民俗 -->
                <div class="category-card" data-category="民俗" style="--card-color-1: #BA68C8; --card-color-2: #AB47BC;">
                    <div class="category-icon">🎊</div>
                    <div class="category-name">民俗</div>
                    <div class="category-desc">节庆习俗，传承民族文化精神</div>
                    <div class="category-count">查看更多 →</div>
                </div>
            </div>
        </div>
        
        <!-- 功能区块 -->
        <div class="features-section">
            <h2 class="section-title">我们的特色</h2>
            <div class="features-grid">
                <!-- 功能卡片1 -->
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M21.19 15.56L22 12c0-3.69-2.47-6.86-6-8-.57.53-1.07 1.17-1.56 1.85L13.4 9H17v2h-6V7h-2v6h7l2.56-2.56c2.63 3.13 2.63 8.01 0 11.14z"/>
                            <path d="M14 19H7v2h7z"/>
                        </svg>
                    </div>
                    <h3 class="feature-title">海量数据</h3>
                    <p class="feature-description">收录全国各地非物质文化遗产项目，让您一站式了解中华文化瑰宝</p>
                </div>
                
                <!-- 功能卡片2 -->
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/>
                        </svg>
                    </div>
                    <h3 class="feature-title">精美展示</h3>
                    <p class="feature-description">采用瀑布流布局和精美图片，提供沉浸式的视觉体验和便捷的浏览方式</p>
                </div>
                
                <!-- 功能卡片3 -->
                <div class="feature-card">
                    <div class="feature-icon">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
                            <path d="M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm0 10.99h7c-.53 4.12-3.28 7.79-7 8.94V12H5V6.3l7-3.11v8.8z"/>
                        </svg>
                    </div>
                    <h3 class="feature-title">便捷搜索</h3>
                    <p class="feature-description">强大的搜索功能，支持按关键词、类别、地域等多种方式快速查找非遗项目</p>
                </div>
            </div>
        </div>
        
        <!-- 精选内容滑动窗口 -->
        <div class="featured-section">
            <div class="section-header">
                <h2 class="section-title">精选非遗</h2>
                <div class="slider-controls">
                    <button class="slider-btn prev-btn" id="prev-featured">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                            <path d="M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"/>
                        </svg>
                    </button>
                    <button class="slider-btn next-btn" id="next-featured">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
                            <path d="M8.59 16.59L10 18l6-6-6-6-1.41 1.41L13.17 12z"/>
                        </svg>
                    </button>
                </div>
            </div>
            
            <div class="featured-slider-container">
                <div class="featured-slider" id="featured-slider">
                    <!-- 精选项目1 -->
                    <div class="featured-slide">
                        <div class="featured-content">
                            <div class="featured-image">
                                <img src="https://picsum.photos/seed/feiyi1/800/600" alt="传统技艺项目">
                            </div>
                            <div class="featured-text">
                                <div class="featured-subtitle">传统技艺</div>
                                <h3>探索中国传统工艺之美</h3>
                                <p class="featured-description">中国传统工艺历史悠久，技艺精湛，承载着中华民族的智慧结晶。从陶艺、木雕到刺绣、剪纸，每一项技艺都展现了中华文化的独特魅力。</p>
                                <button class="featured-button" data-category="传统技艺">了解详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 精选项目2 -->
                    <div class="featured-slide">
                        <div class="featured-content">
                            <div class="featured-image">
                                <img src="https://picsum.photos/seed/feiyi2/800/600" alt="传统音乐项目">
                            </div>
                            <div class="featured-text">
                                <div class="featured-subtitle">传统音乐</div>
                                <h3>聆听千年古乐的回响</h3>
                                <p class="featured-description">中国传统音乐是中华文化的重要组成部分，从古典乐器到民间歌谣，每一个音符都传递着中华民族的情感与智慧。</p>
                                <button class="featured-button" data-category="传统音乐">了解详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 精选项目3 -->
                    <div class="featured-slide">
                        <div class="featured-content">
                            <div class="featured-image">
                                <img src="https://picsum.photos/seed/feiyi3/800/600" alt="传统舞蹈项目">
                            </div>
                            <div class="featured-text">
                                <div class="featured-subtitle">传统舞蹈</div>
                                <h3>舞动民族精神的韵律</h3>
                                <p class="featured-description">中国传统舞蹈形式多样，风格各异，是各民族文化的重要载体，展现了中华民族的审美追求和文化内涵。</p>
                                <button class="featured-button" data-category="传统舞蹈">了解详情</button>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 精选项目4 -->
                    <div class="featured-slide">
                        <div class="featured-content">
                            <div class="featured-image">
                                <img src="https://picsum.photos/seed/feiyi4/800/600" alt="传统戏剧项目">
                            </div>
                            <div class="featured-text">
                                <div class="featured-subtitle">传统戏剧</div>
                                <h3>品味经典戏曲的魅力</h3>
                                <p class="featured-description">中国传统戏剧如京剧、昆曲等，是世界文化遗产的瑰宝，集唱、念、做、打于一体，展现了中华文化的博大精深。</p>
                                <button class="featured-button" data-category="传统戏剧">了解详情</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 滑动指示器 -->
            <div class="slider-indicators" id="featured-indicators">
                <button class="indicator active" data-index="0"></button>
                <button class="indicator" data-index="1"></button>
                <button class="indicator" data-index="2"></button>
                <button class="indicator" data-index="3"></button>
            </div>
        </div>
        

    </div>

    <!-- 页脚 -->
    <div class="footer">
        <div class="footer-content">
            <h3>非遗百科</h3>
            <div class="footer-links">
                <a href="#" class="footer-link">关于我们</a>
                <a href="#" class="footer-link">联系我们</a>
                <a href="#" class="footer-link">帮助中心</a>
                <a href="#" class="footer-link">隐私政策</a>
                <a href="#" class="footer-link">使用条款</a>
            </div>
            <div class="footer-copyright">
                &copy; 2025 非遗百科. 保留所有权利.
            </div>
        </div>
    </div>

    <script>
        // 类别目录栏点击事件处理
        document.querySelectorAll('.category-item').forEach(item => {
            item.addEventListener('click', function() {
                const category = this.getAttribute('data-category');
                window.location.href = `category.html?type=${encodeURIComponent(category)}`;
            });
        });
        
         
        
        // 模式切换功能
        function setupThemeToggle() {
            const themeToggle = document.querySelector('.theme-toggle');
            const body = document.body;
            
            // 检查用户之前的主题偏好
            if (localStorage.getItem('theme') === 'dark' || 
                (!localStorage.getItem('theme') && window.matchMedia('(prefers-color-scheme: dark)').matches)) {
                body.classList.add('dark-mode');
            } else {
                body.classList.remove('dark-mode');
            }
            
            // 添加点击事件处理
            themeToggle.addEventListener('click', function() {
                body.classList.toggle('dark-mode');
                
                // 保存用户的主题偏好
                if (body.classList.contains('dark-mode')) {
                    localStorage.setItem('theme', 'dark');
                } else {
                    localStorage.setItem('theme', 'light');
                }
            });
        }
        
        // 搜索功能
        function setupSearch() {
            const searchInput = document.getElementById('search-input');
            const searchButton = document.getElementById('search-button');
            
            // 搜索按钮点击事件
            searchButton.addEventListener('click', function() {
                const keyword = searchInput.value.trim();
                if (keyword) {
                    // 跳转到搜索结果页面或瀑布流页面并带上搜索参数
                    window.location.href = `waterfall.html?search=${encodeURIComponent(keyword)}`;
                }
            });
            
            // 搜索框回车事件
            searchInput.addEventListener('keypress', function(event) {
                if (event.key === 'Enter') {
                    const keyword = searchInput.value.trim();
                    if (keyword) {
                        window.location.href = `waterfall.html?search=${encodeURIComponent(keyword)}`;
                    }
                }
            });
        }
        
        // 精选内容滑动窗口功能
        function setupFeaturedSlider() {
            const slider = document.getElementById('featured-slider');
            const slides = document.querySelectorAll('.featured-slide');
            const prevBtn = document.getElementById('prev-featured');
            const nextBtn = document.getElementById('next-featured');
            const indicators = document.querySelectorAll('.indicator');
            const featuredButtons = document.querySelectorAll('.featured-button');
            
            let currentSlide = 0;
            const totalSlides = slides.length;
            
            // 更新滑动窗口
            function updateSlider() {
                slider.style.transform = `translateX(-${currentSlide * 100}%)`;
                
                // 更新指示器
                indicators.forEach((indicator, index) => {
                    if (index === currentSlide) {
                        indicator.classList.add('active');
                    } else {
                        indicator.classList.remove('active');
                    }
                });
            }
            
            // 上一张幻灯片
            function prevSlide() {
                currentSlide = (currentSlide - 1 + totalSlides) % totalSlides;
                updateSlider();
            }
            
            // 下一张幻灯片
            function nextSlide() {
                currentSlide = (currentSlide + 1) % totalSlides;
                updateSlider();
            }
            
            // 点击指示器切换幻灯片
            indicators.forEach(indicator => {
                indicator.addEventListener('click', function() {
                    currentSlide = parseInt(this.getAttribute('data-index'));
                    updateSlider();
                });
            });
            
            // 设置按钮事件
            prevBtn.addEventListener('click', prevSlide);
            nextBtn.addEventListener('click', nextSlide);
            
            // 精选内容按钮点击事件
            featuredButtons.forEach(button => {
                button.addEventListener('click', function() {
                    const category = this.getAttribute('data-category');
                    window.location.href = `category.html?type=${encodeURIComponent(category)}`;
                });
            });
            
            // 自动轮播
            let slideInterval = setInterval(nextSlide, 5000);
            
            // 鼠标悬停时暂停自动轮播
            slider.addEventListener('mouseenter', function() {
                clearInterval(slideInterval);
            });
            
            // 鼠标离开时恢复自动轮播
            slider.addEventListener('mouseleave', function() {
                slideInterval = setInterval(nextSlide, 5000);
            });
        }
        
        // 按钮点击事件设置
        function setupButtonEvents() {
            const exploreButton = document.getElementById('explore-button');
            
            // 开始探索按钮
            exploreButton.addEventListener('click', function() {
                window.location.href = 'waterfall.html';
            });
            
            // 导航栏"非遗类别"按钮 - 滚动到分类区域
            const scrollToCategoriesBtn = document.getElementById('scroll-to-categories');
            if (scrollToCategoriesBtn) {
                scrollToCategoriesBtn.addEventListener('click', function() {
                    const categoriesSection = document.getElementById('categories-section');
                    if (categoriesSection) {
                        categoriesSection.scrollIntoView({ behavior: 'smooth', block: 'start' });
                    }
                });
            }
            
            // 分类卡片点击事件
            const categoryCards = document.querySelectorAll('.category-card');
            categoryCards.forEach(card => {
                card.addEventListener('click', function() {
                    const category = this.getAttribute('data-category');
                    if (category) {
                        window.location.href = `category.html?type=${encodeURIComponent(category)}`;
                    }
                });
            });
        }
        
        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function() {
            setupThemeToggle();
            setupSearch();
            setupButtonEvents();
            setupFeaturedSlider();
        });
    </script>
</body>
</html>